<template>
  <div class="search">
  <el-card class="card">
  
   <input type="text" placeholder="2021全网热搜....." v-model="search" ref="inp" @change="ss"><button @click="list"> <i class="iconfont icon-sousuo1"></i></button>
   <div class="gs" ref="gs">
     <ul>
     <router-link
     tag="li"
     :to="`/play/${itm.id}`"
      v-for="(itm,index) in lists" :key="index">{{itm.name}}</router-link>

   </ul>
   </div>
   
  </el-card>
  <el-card>
    <div class="boc"></div>
  </el-card>
  </div>
</template>
<script>


export default {
   name:'Search',
  data() {
    return{
      search:'',
      lists:[],
     
    } 
  },
  created(){
   
  },
  mounted(){
 
    
  
  },
  methods:{
    ss(){

       if ( this.search==="") {
         
      this.$refs.gs.style.display="none"
    }
    },
    list(){
        this.$refs.gs.style.display="block"
    this.$http.get('/api/search',{params:{keywords:this.search}}).then(res=>{
  this.$store.commit('getlist',res.data.result.songs)
      console.log(res.data.result.songs);
      this.lists=res.data.result.songs
    })
    },
   
    
  }
}
</script>


<style lang="less" scoped>
.search{
 display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .card{
    background-color: black;
    width: 600px;
    height: 160px;
    text-align: center;
    line-height: 100px;
    border-radius: 10px;
  }
  .gs{
    position: absolute;
    display: none;
    width: 260px;
    height: 300px;
    overflow: hidden;
    background-color:white;
    top: 195px;
    margin-left: 120px;
  }
  .gs li{
     overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;/* 不换行 */
    margin-top: 0;
    height: 20px;
    line-height: 20px;
    width: 100%;
  }
  .boc{
  width: 600px;
  height: 400px;
background: url(../assets/e.png);
}
.el-card{
  margin-top: 30px;
}
input{
  text-indent: 8px;
  border: red 1px solid;
  width: 300px;
  height: 36px;
  outline: none;
  border-right: none;
    border-radius: 20px 0 0 20px ;
}
button{
  width: 59px;
  height: 38px;
   border: red 1px solid;
   border-left:0;
   outline: none;
   border-radius: 0 20px 20px 0;
   background-color: rgb(32, 17, 243);
   color:white ;
}
}



</style>
